import React from 'react';
import Graphin, { Behaviors, GraphinData, IG6GraphEvent } from '@antv/graphin';

import { message } from 'antd';
import { useProcessGraphinData } from '../Hooks';
import { DomainStyle, NodeType } from '../config';
import RzToolBar from './behaviors/ToolBar';
import RzNodeClick from './behaviors/NodeClick';

export interface IGraphinProps {
  data: GraphinData;
  type?: 'domain' | 'concept';
  onNodeClick?: (data: any) => void;
}

const { ZoomCanvas, DragNodeWithForce, DragNode } = Behaviors;

const RzGraphin = (props: IGraphinProps) => {
  const { data, type = 'domain', onNodeClick } = props;

  const graphinData = useProcessGraphinData(data, type);

  const layout = {
    type: 'graphin-force',
    preset: {
      type: 'radial',
    },
    animation: true,
  };

  return (
    <>
      <Graphin data={graphinData} layout={layout}>
        <DragNodeWithForce autoPin={false} />
        <DragNode />
        <ZoomCanvas enableOptimize />
        <RzToolBar />
        <RzNodeClick onNodeClick={onNodeClick} />
      </Graphin>
    </>
  );
};

export default React.memo(RzGraphin);

Graphin.registerNode(
  'domain-node',
  {
    options: {
      style: {},
      stateStyles: {
        hover: {
          keyshape: {
            fill: '#000',
          },
        },
        selected: {
          keyshape: {
            fill: '#000',
          },
        },
      },
    },
    draw(cfg: any, group: any) {
      const { type, name } = cfg.data;
      const keyshape = group.addShape('rect', {
        attrs: {
          id: 'circle-floor',
          x: 0,
          y: 0,
          width: 120,
          height: type === NodeType.CONCEPT ? 40 : 30,
          radius: type === NodeType.CONCEPT ? 20 : 5,
          stroke: DomainStyle.Color[type],
          shadowColor: DomainStyle.Color[type],
          shadowOffsetX: 1,
          fill: type === NodeType.CONCEPT ? DomainStyle.Color[type] : 'transparent',
          fillOpacity: 0.2,
          lineWidth: 1,
          strokeOpacity: 1,
        },
        draggable: true,
        name: 'circle-floor',
      });

      group.addShape('text', {
        attrs: {
          fontSize: 12,
          x: 60,
          y: type === NodeType.CONCEPT ? 20 : 15,
          textAlign: 'center',
          textBaseline: 'middle',
          text: name,
          fill: DomainStyle.Color[type],
        },
        draggable: true,
        name: 'text',
      });
      return keyshape;
    },
  },
  'single-node'
);
